<template>
    <section>
        <banner></banner>
        <article>
            <h2 class="title_tj"><p>文章<span>推荐</span></p></h2>
            <div class="bloglist left">
                <div v-for="data in tableData">
                    <article-item :article-id=data.id>
                        <span slot="title">{{data.title}}</span>
                        <span slot='created_at'>{{data['created_at']}}</span>
                        <span slot="user">{{data.username}}</span> {{data.body.substr(0,100)}}
                    </article-item>
                </div>
    
            </div>
            <aside-right></aside-right>
            <el-col :span="24"
                    class="toolbar"
                    style="margin-top:20px;">
                <el-pagination layout="prev, pager, next"
                               :page-size="pagesize"
                               :total="total"
                               :current-page="currentpage"
                               @current-change="pageHandle">
                </el-pagination>
            </el-col>
        </article>
    </section>
</template>
<script>
import banner from './banner.vue'
import article_item from './article_item.vue'
import aside_right from './aside_right.vue'
export default {
    components: {
        'article-item': article_item,
        'aside-right': aside_right,
        banner
    },
    data() {
        return {
            username: 'JimCreen',
            tableData: [],
            pagesize: 10,
            total: 5,
            currentpage: 1,
        }
    },
    created() {
        api.getData('api/article', this);
    },
    methods: {
        pageHandle(val) {
            api.getDataByPage('api/article', val, this);
        }
    }
}
</script>
<style lang="scss">

</style>
